<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .tabs{
            display: flex;
            height: 40px;
            align-items: center;
            border-bottom: 1px solid #ccc;
        }
        .tabs span{
           padding: 0 15px; 
           height: 40px;
           line-height: 40px;
        }
        .tabs span.active{
            color: #f03d3f;
            border-bottom:2px solid #f03d3f ;
        }
        .p{
            width: 300px;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3; /* 这里是超出几行省略 */
            overflow: hidden;
        }
    </style>
</head>
<body>
<div id="app" :style="`font-size: ${size}px;`">
    <h3>电影详情</h3>
    <hr>
    <div>电影封面：
        <img :src="`./img/${movie.url}.jpg`" width="100">
    </div>
    <div>电影名称：{{movie.name}}</div>
    <div>电影时长：{{Math.floor(movie.duration / 60)}}小时{{movie.duration % 60}}分钟</div>
    <div>上映时间：{{movie.showingon}}</div>
    <div>上电影类型：{{movie.type}}</div>
    <div>主演：{{movie.actor.join(' / ')}}</div>
    <!-- 标签页 -->
    <div class="tabs">
        <span @click="now=0" :class="now==0?'active' : ''">介绍</span>
        <span @click="now=1" :class="now==1?'active' : ''">演职人员</span>
        <span @click="now=2" :class="now==2?'active' : ''">奖项</span>
        <span @click="now=3" :class="now==3?'active' : ''">图集</span>
    </div>
    <div @click="showcont" v-if="show" class="p">
        令全世界为之疯狂的歌姬·乌塔，她的身世成谜，
        歌声却被誉为“来自别的次元”。而这次，
        她将举办演唱会并第一次露出庐山真面目。
        为了欣赏她的歌声，路飞率领的草帽一伙，
        以及世界各地的歌迷都汇聚在会场之中。
        全世界备受瞩目的歌声即将在此回荡。
        而故事就在乌塔是“杰克斯的女儿”这一令人震惊的发现中拉开帷幕！
    </div>
    <div v-show="now==0">电影介绍的相关内容</div>
    <div v-show="now==1">电影演职人员</div>
    <div v-show="now==2">该电影获得的奖项</div>
    <div v-show="now==3">该电影的剧组照片，图集</div>

    <hr>
    <button @click="size++">点我字体逐渐变大</button>
    <button @click="next">换一部(Vue的方式绑定事件)</button>
    <button @click="next()">换一部(Vue的方式绑定事件)</button>
    <button @click="sum(10,20)">sum</button>
    <hr>
    <button id="btnNext">换一部电影(DOM的方式绑定事件)</button>
</div>
    <script src="./vue.js"></script>
    <script>
       let vm = new Vue({
            //定义页面中所需要的数据
            el:'#app',
            data:{
                show:true,
                size:12,
                now:0,//用于表示当前正选中的span的下标
                movie:{
                url:'hhw',
                name:'航海王·红发歌姬',
                duration:114,
                showingon:'2022-12-11',
                type:'动画/剧情/热血',
                actor:['红发·香克斯','陆飞','船上的几个']
                }
            },
            //el告诉vue，将页面中的哪一个dom元素当做vue虚拟dom的根元素
            methods:{
                showcont:function(){
                    this.show = !this.show
                },
                next(e){
                    alert('next @click...')
                    console.log(e)
                    this.movie = {
                        url:'gf',
                        name:'功夫',
                        duration:123,
                        type:'剧情 / 武侠',
                        showingon:'2022-12-12',
                        actor:['周星驰','斧头帮','亮哥','小新']
            }
                },
                sum(a,b){
                    alert(a + b)
                }
            }
        })

        //为按钮绑定事件
        btnNext.onclick = function(){
            vm.movie = {
                name:'功夫',
                duration:123,
                type:'剧情 / 武侠',
                showingon:'2022-12-12',
                actor:['周星驰','斧头帮','亮哥','小新']
            }
        }
    </script>
</body>
</html>